By

文章目录
  1. 1. 尝试 ES6 中的箭头函数 | JerryQu 的小站
  2. 2. 尝试 ES6 中的箭头函数
    1. 2.0.1. CoffeeScript

尝试 ES6 中的箭头函数 | JerryQu 的小站

javascript 箭头函数

尝试 ES6 中的箭头函数

最近组里不少同学对 ES6 很有兴趣，月影老大也给大家分享过有关 ES6 的话题。接下来，我也会尝试使用 ES6 的一些新特性并记录下来，内容不一定全面或精确。更全面的 ES6 介绍可以参考相应标准文档，或者MDN，或者有大量高质量 ES6 译文及原创的优秀博客紫云飞。另外，「奇舞周刊」近期准备开辟译文专栏，有兴趣参与的同学请联系我。

废话不多说，今天要介绍的是 ES6 中的箭头函数（Arrow Function），目前只有 Firefox22+ 支持，本文示例需要在新版 Firefox 下才能正常工作。

定义一个箭头函数很简单，基本语法是：

JS([param] [, param]) => {
   statements
}

param => expression

param 是参数，根据参数个数不同，分这几种情况：

  • () => { … } // 零个参数用 () 表示；
  • x => { … } // 一个参数可以省略 ()；
  • (x, y) => { … } // 多参数不能省略 ()；

当然，和普通函数一样，箭头函数也可以使用 ES6 新增的「默认参数」和「剩余参数」（ Firefox15+ 开始支持）：

JS func1 = (x = , y = ) => x + y;
func1(); // 得到 3

 func2 = (x, ...args) => { console.log(args) };
func2(,,); // 输出 [2, 3]

箭头函数允许多行语句或者单行表达式作为函数体。多行语句要用 {} 括起来；单行表达式不需要 {}，并且会作为函数返回值：

JSx => { return x * x }; // 函数返回 x * x
x => x * x; // 同上一行
x => return x * x; // SyntaxError 报错，不能省略 {}
x => { x * x }; // 合法，没有定义返回值，返回 undefined

箭头函数也是 JS 函数的一种，所以之前的 instanceof 和 typeof 依然可用：

JS func1 = () => {};
func1 instanceof Function; // true

 func2 = () => {};
typeof func2; // "function"

Nicholas C. Zakas 的博客中指出了箭头函数的几个特性：不能被 new 、this 被绑定为函数定义时的 this 且无法改变、不支持 arguments 。对于最后一点，我在 Firefox24 测试发现，arguments 可以正常工作。不知道是标准有变化，还是 Firefox 的实现有偏差，我们来看前两个特性。

箭头函数内部没有 constructor 方法，也没有 prototype，所以不支持 new 操作。new (() => {}) 会触发 TypeError 报错。

JS 里的 this 指针一直是新手很头疼的事情，看一个简单的例子：

JS o = {
    x : ,
    func : function { console.log(.x) },
    test : function {
        setTimeout(function {
            .func();
        }, );
    }
};

o.test(); // TypeError : this.func is not a function

上面代码得不到预期结果，因为 this 发生了改变，这个问题可以这样修正：

JS o = {
    x : ,
    func : function { console.log(.x) },
    test : function {
         _this = ;
        setTimeout(function {
            _this.func(); 
        }, );
    }
};

o.test();

在函数内部使用外部事先保存的 this 就没问题了。也可以改用 ES5 引入的 bind 方法：

JS o = {
    x : ,
    func : function { console.log(.x) },
    test : function {
        setTimeout(function {
            .func(); 
        }.bind(), );
    }
};

o.test();

而有了箭头函数，像下面这样写就可以了：

JS o = {
    x : ,
    func : function { console.log(.x) },
    test : function {
        setTimeout(() => { .func() }, );
    }
};

o.test();

箭头函数的 this 始终指向函数定义时的 this，而非执行时。下面看一个尝试改变箭头函数 this 指针的例子：

JS x = ,
    o = {
        x : ,
        test : () => .x
    };

o.test(); 
o.test.call(o); // 依然是1

CoffeeScript

实际上，CoffeeScript 一直就支持用这种 =>（胖箭头）定义函数；同时 CoffeeScript 还支持用 ->（瘦箭头）定义函数。二者的区别是胖箭头会绑定 this，瘦箭头不会，来看一个例子，以下是 Coffee 代码：

JS.clickHandler = -> alert "clicked"
el1.addEventListener "click", (e) => .clickHandler(e)
el2.addEventListener "click", (e) -> .clickHandler(e)

编译后的 JS 代码是这样的：

JS _this = ;

.clickHandler = function {
  return alert("clicked");
};

el1.addEventListener("click", function {
  return _this.clickHandler(e);
});

el2.addEventListener("click", function {
  return .clickHandler(e);
});

可以看到，使用胖箭头的 el1 绑定的 click 函数的 this 指向函数定义时的 this；而 el2 的 click 函数的 this 指向运行时的元素本身。

JS 的箭头函数没看到有瘦箭头的形式。

关于箭头函数的性能，我不想花精力去研究。一方面 ES6 标准并没有完全确定，另一方面现在只有 Firefox 一家支持箭头函数，对比意义不大。jsPref 上有个相关的测试，大家可以点过去看看。从已有的结果来看，箭头函数与 bind 函数对比，性能差别不大；尤其是在 Firefox25 上，箭头函数已经比 bind 快了。

本文链接：https://imququ.com/post/arrow-function-in-es6.html，参与评论 »

–EOF–

发表于 2013-09-11 22:22:35，并被添加「ES6、JavaScript」标签。

本站使用「署名 4.0 国��」创作共享协议，同时授权「奇舞周刊」微信公众号在使用本站文章时标注「原创」。更多说明 »

提醒：本文最后更新于 1075 天前，文中所描述的信息可能已发生改变，请谨慎使用。

文章目录
  1. 1. 尝试 ES6 中的箭头函数 | JerryQu 的小站
  2. 2. 尝试 ES6 中的箭头函数
    1. 2.0.1. CoffeeScript